<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>订单列表</title>
    <script src="./js/vue2.6.12.js"></script>
<!--  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
  <script src="./js/axios.js"></script>
  <script src="./js/areas.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
  <script type="text/javascript" src="./js/qs.js"></script>
  <script type="text/javascript" src="./js/common.js"></script>
  <link rel="stylesheet" href="./css/common.d1d257d3.css">
<link rel="stylesheet" href="./css/profile-profile.772600de.css">
</head>
<body>

<div id="app">
<div class="header">
  <div class="header-inner">
          <a href="index.html" class="logo" ></a>
      <div class="city-container" >
          <div class="city-selected">
              <div class="city-name">
                  &nbsp;
                  <!--                        <span class="caret"></span>-->
              </div>
          </div>
          <div class="city-list" >
              <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
          </div>
      </div>

      <div class="nav">
          <ul class="navbar">
              <li><a href="index.html" >首页</a></li>
              <li><a href="movie.html" >电影</a></li>
              <li><a href="cinema.html" >影院</a></li>
              <li><a href="dashboard_websocket.html" target="_blank">榜单</a></li>

          </ul>
      </div>

      <div class="user-info" v-if="islogin">
          <div class="user-avatar has-login">
              <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
              <span class="caret"></span>
              <ul class="user-menu yes-login-menu">
                  <li class="text"><a href="./orderlist.html">我的订单</a></li>
                  <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
                  <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
              </ul>
          </div>
      </div>
      <div class="user-info" v-if="!islogin">
          <div class="user-avatar J-login">
              <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
              <span class="caret"></span>
              <ul class="user-menu no-login-menu">
                  <li><a href="javascript:void(0)" @click="login">登录</a></li>
              </ul>
          </div>
      </div>

      <form target="_blank" class="search-form" >
          <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
                 autocomplete="off">
          <input class="submit" type="button"  @click="doSearch"/>
      </form>


  </div>
</div>
<div class="header-placeholder"></div>

    <div class="container">
    <div class="content">
      <div class="main">
        <div class="info-content clearfix">
          <div class="user-profile-nav">
            <h1>个人中心</h1>
            <a href="orderlist.html" class="orders active">我的订单</a>
            <a href="abc/profile" class="profile ">基本信息</a>
          </div>

<div class="orders-container">
  <div class="profile-title">我的订单</div>

    <div class="order-box" v-for="order in orderList">
      <div class="order-header">
        <span class="order-date">{{order.orderTime.substr(0,10)}}</span>
        <span class="order-id">订单号:{{order.orderIdStr}}</span>
          <a href="javascript:void(0)" class="del-order" @click="delOrder(order.orderIdStr)"></a>
      </div>

      <div class="order-body">
        <div class="poster" style="width: 66px;height: 91px">
          <img :src="movieImagePath+order.movieImg">
        </div>

        <div class="order-content">
          <div class="movie-name">{{order.movieName}}</div>
          <div class="cinema-name">{{order.cinemaName}}</div>
          <div class="hall-ticket">
            <span>{{order.htName}}</span>
              <span>{{order.seatLabel}}</span>
          </div>
          <div class="show-time">{{order.startTime}}</div>
        </div>

        <div class="order-price">￥{{order.fareMoney}}</div>

        <div class="order-status">
          <span v-if="order.orderStatus==1">待付款</span>
          <span v-if="order.orderStatus==2">已付款</span>
          <span v-if="order.orderStatus==3">超时失效</span>
        </div>

        <div class="actions">
          <div>
              <a :href="'pay.html?orderIdStr='+order.orderIdStr+'&totalPay='+order.orderTotalPay+'&movieName='+order.movieName+'&cinemaName='+order.cinemaName+'&htName='+order.htName+'&startTime='+order.startTime+'&seatLabel='+order.seatLabel" class="pay-btn" v-if="order.orderStatus==1">付款</a>
          </div>
        </div>
      </div>
    </div>

</div>
    </div>
  </div>


</div>

<div class="mask3">
    <div id="delete-confirm-container" class="modal-container" style="display:none">
    <div class="modal">
      <span class="icon"></span>

      <p class="tip">您确定要删除该订单嘛？删除后，不可恢复～</p>

      <div class="short btn ok-btn" @click="confirmDel">确定</div>
      <div class="short btn cancel-btn" @click="cancelDel">取消</div>
    </div>
  </div>

</div>

<div class="mask1">
    <div class="modal-container" style="display:none">
    <div class="modal">
      <span class="icon"></span>

      <p class="tip">请注意，注销账号会清空所有订单信息、影评、积分、<br>账户余额等信息且无法找回，是否继续？</p>

        <div class="short btn ok-btn" >确定</div>
        <div class="short btn cancel-btn">取消</div>
    </div>
  </div>

</div>

<div class="mask2">
    <div class="modal-container" style="display:none">
    <div class="modal">
      <span class="icon"></span>

      <p class="tip">请联系客服8888-8888</p>

        <div class="ok-btn btn">我知道了</div>
    </div>
  </div>

</div>

    </div>

<div class="footer" style="visibility: visible;">

</div>
</div>
</body>
<script>
  let vm = new Vue({
    el: "#app",//绑定，告知vue负责管理页面的哪个部分
    data: {
      islogin:false,
      orderCinema:new Map(),
      orderMovie:new Map(),
      orderHallType:new Map(),
      movieImagePath:'./images/',//电影图片的路径前缀
      orderList: [{orderStatus:1,orderIdStr:"p1111111111",seatLabel:"1排1座,1排2座",orderId:11111,orderTime:"2021-02-21",fareMoney:49,startTime:"2021-02-21 15:20:20",htName:"IMAX厅",cinemaName:"万达影城",movieImg:"ecca4f0b95340b2c57006a1bace4c3f91386100.jpg@464w_644h_1e_1c.jpg",movieName:"天气之子"}]
      ,//订单列表对象
      deletedOrderId:'',//需要被删除的orderId
      searchKey:'' //搜索关键字
    },
    methods: {
        //搜索
        /**
         * url:search.html
         * method:get
         * param: searchKey
         * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
         */
        doSearch() {
            location.href=encodeURI("search.html?searchKey="+this.searchKey)
        },
      //查询当前用户的订单列表
        /**
         * url: order/order/list
         * param:pageNum=1
         * param:pageSize=100
         * return
         * 在响应函数中
         *   把返回的对象列表赋值this.orderList=res.rows
         */
      queryOrderList(){
	      //1.检查用户是否登录，如果没有，提醒用户登录，并跳转到登录页面

		  //2. get请求到order/order/list获取用户订单列表，并把返回结果赋值this.orderList=res.rows

      },


        //播放时间
        populateStartTime(){

        },
      //删除一个订单
        /**
         * orderId:用户点击要删除的orderId
         * 把orderId赋值给this.deletedOrderId=orderId
         * 把删除确认弹出框的css设置为可见
         *          let confirmContainer = document.getElementById("delete-confirm-container")
                    confirmContainer.style=''
         */
      delOrder(orderIdStr){

      },
      //确定删除
        /**
         * url: order/order/
         * method:post
         * param: 参数 orderIdStr
         * return
         *   在响应函数中把删除确认窗口的css设置为隐藏
         *           let confirmContainer = document.getElementById("delete-confirm-container")
                    confirmContainer.style='display:none'
            重新刷新一遍当前页面location.reload()
         */
      confirmDel(){

      },
      //取消删除
        /**
         * 1.把被删除的orderId设置为空 this.deletedOrderId=''
         * 2.把确认删除框设置为隐藏
         *         let confirmContainer = document.getElementById("delete-confirm-container")
                    confirmContainer.style='display:none'
         */
      cancelDel(){

      },
        //退出登录，跳转到主页
        logout(){
            removeToken()
            localStorage.removeItem("user_cellphone")
            location.href="index.html"
        },
        //跳转到登录页面
        login(){
            location.href='login.html'
        },
        //检查是否登录
        checkIsLogin(){
            if(getToken()){
                this.islogin=true;
            }
        },
    },
      /**
       * 调用this.queryOrderList()加载订单列表
	   * 调用this.checkIsLogin() 设置是否登录标记
       */
    created() {


    }
  })
</script>
</html>
